<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/css/signup.css">
</head>

<body>
<form action="/chenzikangUserSystem/signup" method="post" th:object="${userForm}">
    <section class="section">
        <div>
            <header class="session-form__header">
                <h2 class="session-form__title">
                    <span>注册</span>
                </h2>
                <span class="pull-right">
                    <span >已有帐号？</span>
                    <a href="login.html">点此登录</a>
                </span>
            </header>

            <div class="total">
                <div>
                    <input th:field="*{name}" class="name" type="text" name="name"  placeholder="姓名">
                    <p th:if="${#fields.hasErrors('name')}"  th:errors="*{name}" class="nameError"></p>
                </div>

                <div>
                    <input class="prefix" type="text" value="https://gitee.com/" disabled>
                    <input th:field="*{prefix}" class="personalAddress" type="text" name="prefix"  placeholder="个人空间地址">
                    <p th:if="${#fields.hasErrors('prefix')}"  th:errors="*{prefix}" class="prefixError"></p>
                </div>

                <div>
                    <input th:field="*{user}" onblur="checkEmail()" class="phoneOrEmail" name="user"
                           type="text" placeholder="请输入邮箱" id="user">
                    <p th:if="${#fields.hasErrors('user')}"  th:errors="*{user}" class="userError"></p>
                </div>

                <div>
                    <input class="verificationCode" name="captcha" type="text" placeholder="验证码">
                    <a  href="javascript:reloadCaptcha()"  >
                        <img class="captchaImg" id="captcha" src="/captcha"/>
                    </a>
                    <p th:if="${#fields.hasErrors('captcha')}"  th:errors="*{captcha}" class="captchaError"></p>

                </div>

                <div>
                    <input type="text" class="emailCode" name="emailCode"  placeholder="邮箱验证码"  >
                    <a href="javascript:sendEmail()" class="emailCodeButton" >获取验证码</a>
                    <p th:if="${#fields.hasErrors('emailCode')}"  th:errors="*{emailCode}"  class="emailCodeError"></p>

                </div>


                <div>
                    <input th:field="*{pwd}" class="pwd" type="text" name="pwd" placeholder="密码不少于6位">
                    <p th:if="${#fields.hasErrors('pwd')}"  th:errors="*{pwd}" class="pwdError"></p>
                </div>

                <div class="agreement">
                    <input type="checkbox" id="agree">
                    <label for="agree">我已阅读并同意
                        <a href="https://gitee.com/terms" target="_blank">使用条款</a>以及
                        <a href="https://gitee.com/inactive_accounts">非活跃账号处理规范</a>
                    </label>
                </div>


                <div>
                    <button class="button" type="submit">立即注册</button>
                </div>

            </div>

            <div class="osChian">
                <a href="https://www.oschina.net/action/oauth2/authorize?client_id=1q19fXlrCx1S8pHBqSuj&redirect_uri=https%3A%2F%2Fgitee.com%2Fauth%2Foschina%2Fcallback&response_type=code&state=ac54fd517cd9681473841d28ff26b8ca0e631d9e0ee9795c">使用OSChian账号登录</a>
            </div>

        </div>

    </section>

</form>


  
<script>
    function reloadCaptcha() {
  var captchImg= document.getElementById("captcha");
  captchImg.src = "/captcha?t="+(new Date()).getTime();
    }

    // function checkEmail(){
    //     var phone = document.getElementById('user').value;
    //     if(!(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(phone))){
    //         alert("邮箱有误，请重填");
    //         return false;
    //     }
    // }

    //用于发送邮箱验证码
    function sendEmail(){
        var toEmail = document.getElementById("user");
        var msg = toEmail.parentElement.lastElementChild;
        var input = document.getElementsByName("emailCode")[0];
        fetch('/sendemail?email='+toEmail.value)
            .then(function(res){
                return res.json();
            })
            .then(function(data){
                if(data==1){
                    alert("发送成功！");
                }else if(data==2){
                    alert("邮箱已被注册！\n请更换邮箱");
                }else{
                    alert("邮箱错误\n请检查邮箱是否正确");

                }
            })
    }

</script>






</body>

</html>